import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:znmm/UI/A_Common/image/cached_network_Image.dart';
import 'package:znmm/UI/A_Common/image/openImg_view.dart';
import 'package:znmm/config/app_color.dart';

import '../model/cart_model.dart';

class CnCartCell extends StatelessWidget {
  final CnCartModel pModel;
  final Function(CnCartModel model, int iCount)? onCallBack;
  final Function(CnCartModel model)? removeBack;
  const CnCartCell(
      {super.key, required this.pModel, this.onCallBack, this.removeBack});

  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.start,
      children: [
        const SizedBox(
          width: 10,
        ),
        // 1.商品图
        GestureDetector(
          onTap: () {
            Navigator.push(
              context,
              MaterialPageRoute(
                  builder: (context) => OpenImgView(
                        imageUrl: pModel.featuredImage,
                      )),
            );
          },
          child: SizedBox(
            width: 100.w,
            height: 100.h,
            child: ClipRRect(
              borderRadius: BorderRadius.circular(10.w),
              child: Container(
                width: 80.w,
                height: 80.h,
                color: Colors.white,
                child: CachedNetworkImageLoader(imageUrl: pModel.featuredImage),
              ),
            ),
          ),
        ),
        const SizedBox(
          width: 10,
        ),
        // 2.商品标题与数量
        Expanded(
            child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Text(
              pModel.name,
              maxLines: 2,
              overflow: TextOverflow.ellipsis,
            ),
            const SizedBox(
              height: 25,
            ),
            Container(
              width: 100.w,
              decoration: BoxDecoration(
                  color: AppColor.grey.withOpacity(0.1),
                  borderRadius: BorderRadius.circular(10.r)),
              child: Row(
                mainAxisSize: MainAxisSize.min,
                children: [
                  GestureDetector(
                    onTap: () {
                      if (onCallBack != null) {
                        onCallBack!(pModel, -1);
                      }
                    },
                    child: Container(
                      width: 30.w,
                      alignment: Alignment.center,
                      decoration: BoxDecoration(
                        color: AppColor.backgroundColor.withOpacity(0.4),
                      ),
                      child: Text(
                        "-",
                        style: TextStyle(fontSize: 20.sp),
                      ),
                    ),
                  ),
                  Container(
                    width: 40.w,
                    alignment: Alignment.center,
                    color: AppColor.backgroundColor.withOpacity(0.1),
                    child: Text("${pModel.iqty}"),
                  ),
                  GestureDetector(
                    onTap: () {
                      if (onCallBack != null) {
                        onCallBack!(pModel, 1);
                      }
                    },
                    child: Container(
                      width: 30.w,
                      alignment: Alignment.center,
                      color: AppColor.backgroundColor.withOpacity(0.4),
                      child: Text(
                        "+",
                        style: TextStyle(fontSize: 20.sp),
                      ),
                    ),
                  )
                ],
              ),
            )
          ],
        )),
        const SizedBox(
          width: 10,
        ),
        // 3.价格与删除
        SizedBox(
          height: 100.h,
          width: 100.w,
          // decoration: BoxDecoration(border: Border.all(width: 1, color: Colors.red)),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              //Text("${pModel.iqty} x \$${pModel.fSiglePrice}"),
              Text("\$${pModel.fSiglePrice}"),
              GestureDetector(
                onTap: () {
                  if (removeBack != null) {
                    removeBack!(pModel);
                  }
                },
                child: const Row(
                  mainAxisSize: MainAxisSize.min,
                  children: [Icon(Icons.delete), Text("Remove")],
                ),
              )
            ],
          ),
        )
      ],
    );
  }
}
